<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="app-container" v-loading="loading">
        <clue-manager :pid="postId" @change="changeHandle" ref="manager" />

        <assign-to-broker :pid="postId" :broker-id="currentItem.broker_id" ref="assign" @submit="submitAssignHandle" />

        <el-card>
            <div class="myheader">
                <div class="part-left">
                    <div class="block">
                        <el-input v-model="kw" style="border-radius: 100%; width: 150px" size="small" placeholder="搜索关键词">
                            <el-button slot="append" icon="el-icon-search" @click="doSearch" />
                        </el-input>
                        <el-button v-if="kw" type="text" size="small" @click="clearKw">清空</el-button>
                    </div>
                    <div class="block">
                        <EnumerationSelector :radio="true" v-model="scope" cat="clue_scope"></EnumerationSelector>
                    </div>

                    <div class="block">
                        <!-- <post-selector v-model="postId"></post-selector> -->
                    </div>
                </div>
                <div class="right">
                    <!-- <div class="block"> -->
                        <el-button :disabled="loading" icon="el-icon-refresh" size="small" type="default" plain
                            @click="loadData">刷新</el-button>
                    <!-- </div> -->

                    <!-- <div class="block"> -->
                        <el-button size="small" type="primary" icon="el-icon-plus" @click="newHandle">新建客户</el-button>
                    <!-- </div> -->
                </div>
            </div>
            <el-divider></el-divider>
            <el-table :data="items" highlight-current-row>
                <el-table-column prop="id" label="ID" width="80"/>
                <el-table-column prop="name" label="客户姓名" width="120"/>
                <el-table-column prop="mobile" label="客户电话" width="120"/>
                <el-table-column prop="post.title" label="归属项目" />
                <el-table-column prop="first_broker_name" label="首次跟进置业顾问" width="140"/>
                <el-table-column label="归属置业顾问" width="120">
                    <template slot-scope="scope">
                        <el-tag type="danger" size="mini" v-if="!scope.row.broker">未指派</el-tag>
                        <span v-else>{{ scope.row.broker.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间"  width="160"/>
                <el-table-column prop="follow_at" label="最后跟进"  width="160"/>
                <!-- expired_at -->
                <el-table-column prop="expired_at" label="回收时间"  width="160"/>

                <el-table-column label="操作" :width="150">
                    <template slot-scope="scope">
                        <el-link :disabled="!scope.row.broker_id" type="primary"
                            @click="cancleHandle(scope.row)">回收</el-link>
                        <el-link type="primary" @click="assignHandle(scope.row)">指派顾问</el-link>
                        <el-link type="primary" @click="editHandle(scope.row)">管理</el-link>
                        <!-- <el-link type="danger" @click="deleteHandle(scope.row.id)">删除</el-link> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pager">
                <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper" :total="total"
                    :page-sizes="[10, 20, 50, 100]" :page-size="per_page" @current-change="updateCurrentPage"
                    @size-change="updatePageSize" />
            </div>
        </el-card>
    </div>
</template>

<style  scoped>
.inline {
    display: flex;
    justify-content: space-between;
}

.myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.myheader .part-right {
    display: flex;
    justify-content: flex-end;
}

.part-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.part-left .block {
    margin-right: 20px;
}
</style>

<script>
import {
    assignClue,
    getClueList,
    createClue,
    updateClue,
    deleteClue,
} from "@/api/clue";
import ImagePicker from "@/components/ImagePicker";
import ClueManager from "./ClueManager/Index";
import { getPostSimpleList } from "@/api/post";
import filters from "@/utils/filters";
import AssignToBroker from "@/components/AssignToBroker";
import EnumerationSelector from "@/components/EnumerationSelector/Index.vue";
import PostSelector from "@/components/PostSelector.vue";

export default {
    name: "clues",
    components: {
        ImagePicker,
        ClueManager,
        AssignToBroker,
        EnumerationSelector,
        PostSelector,
    },
    data () {
        return {
            kw: "",
            total: 0,
            per_page: 20,
            currentItem: {},
            page: 1,
            items: [],
            loading: false,
            postId: null,
            scope: "public_items",
        };
    },

    created() {
      var id = this.$route.params.id;
      this.postId = parseInt(id);
    },

    props: {},

    computed: {},

    mounted: function () {
        // 拉取厂房列表
        // getPostSimpleList({}).then((res) => {
        //     var postId = res.data[0].id;
        //     this.postId = postId;
        //     // 会自动触发load data
        // });
    },

    watch: {
        scope: {
            handler (newValue, oldValue) {
                this.page = 1;
                this.loadData();
            },
        },
        postId: {
            handler (newValue, oldValue) {
                this.page = 1;
                this.loadData();
            },
        },
    },

    methods: {
        cancleHandle: function (clue) {
            this.$confirm("确定要将客户线索：" + clue.name + "回收到公海吗？").then(
                () => {
                    var data = {
                        id: clue.id,
                        broker_id: "",
                    };
                    updateClue(data).then((res) => {
                        this.loadData();
                        this.$message.success("已回收");
                    });
                }
            );
        },
        submitAssignHandle: function (brokerId) {
            var data = {
                id: this.currentItem.id,
                broker_id: brokerId,
            };
            this.$refs.assign.showDialog = false;
            assignClue(data).then((resp) => {
                this.loading = false;
                this.loadData();
                if (resp.status != 0) {
                    return;
                }
                this.$message.success("已指派给顾问,并短信通知");
            });
        },

        changeHandle: function () {
            this.loading = true;
            this.loadData();
        },
        downloadCsv: function () { },

        formtDateTimeValue: function (e) {
            if (typeof e === "object") {
                var v = e.toLocaleDateString();
                var y = e.getFullYear();
                var m = e.getMonth() + 1;
                var d = e.getDate();
                var date = y + "-" + m + "-" + d;
                var h = e.getHours();
                var m = e.getMinutes();
                var time = h + ":" + m;
                return date + " " + time;
            }
        },

        updateCurrentPage: function (page) {
            this.page = page;
            this.loadData();
        },

        updatePageSize: function (size) {
            this.per_page = size || 10;
        },

        closeHandle: function () {
            this.$refs.manager.close();
        },

        newHandle: function () {
            this.loading = false;
            this.$refs.manager.open({});
        },

        editHandle: function (item) {
            this.loading = false;
            this.$refs.manager.open(item);
        },

        assignHandle: function (item) {
            this.loading = false;
            this.$refs.assign.showDialog = true;
            this.currentItem = item;
        },

        doSearch: function () {
            // 搜索
            this.loading = true;
            this.page = 1;
            this.loadData();
        },

        clearKw: function () {
            this.kw = "";
            this.page = 1;
            this.loadData();
        },

        deleteHandle: function (itemId) {
            var _this = this;
            this.$confirm("确定要删除这条线索吗?", {
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteClue(itemId).then((resp) => {
                    _this.currentItem = {};
                    _this.loadData();
                });
            });
        },

        validate: function (data) {
            if (!data.name || data.name.length <= 3) {
                this.$message.error("企业名称不能少于3个字");
                return false;
            }

            if (!data.address) {
                this.$message.error("请填写地址");
                return false;
            }

            return true;
        },

        loadData: function () {
            this.loading = true;
            var query = {
                page: this.page,
                per_page: this.per_page,
                kw: this.kw,
                post_id: this.postId,
                scope: this.scope,
            };
            getClueList(query).then((resp) => {
                this.items = resp.data.result.map((item, i) => {
                    // item.created_at = filters.utcFormater(item.created_at);
                    // item.follow_at = filters.utcFormater(item.follow_at);
                    return item;
                });
                this.total = resp.data.page.total_items;
                this.loading = false;
            });
        },
    },
};
</script>
